<script setup lang="ts">
import { computed, ref } from "vue";
import { Category } from "./icons/icons";

const props = defineProps<{
  ext: string;
  size?: any;
  source?: string;
  showIfImage?: boolean;
}>();

const ext = ref(`${props.ext}`.replace(".", "").toLowerCase());
const icon = computed(() => Category.getIcon(ext.value));

const showAsImage = computed(() => {
  return props.showIfImage && Category.isImage(ext.value) && props.source;
});
</script>

<template>
  <div class="file-icon">
    <slot v-if="showAsImage" :source="source" name="preview">
      <el-image :src="source" fit="cover" />
    </slot>
    <el-icon v-else :size="size">
      <component :is="icon" />
    </el-icon>
  </div>
</template>

<style lang="scss">
.file-icon {
  display: flex;
  .el-icon {
    height: 100%;
  }

  .el-image {
    height: 100%;
  }
}
</style>
